<template>
	<div>
		<!-- 按钮行 -->
		<div style="margin-bottom: 10px; padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;">
			<el-button type="primary" @click="handleAdd" style="margin-left: 10px;">添加角色<i class="el-icon-circle-plus-outline"
					style="margin: 0 2px;"></i></el-button>
			<el-button type="danger" @click="delBetch">批量删除角色<i class="el-icon-remove-outline"
					style="margin: 0 2px;"></i></el-button>
			<!-- TODO 导入导出文件上传 -->
		</div>

		<el-table :data="tableData" border style="width: 100%;" :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!-- 多选框 -->
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="id" label="ID" width="50"></el-table-column>
			<el-table-column prop="name" label="角色名称" width="150"></el-table-column>
			<el-table-column prop="description" label="角色描述" width="150"></el-table-column>
			<el-table-column prop="flag" label="角色标识" width="200"></el-table-column>

			<!-- 编辑与删除按键 -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="info" icon="el-icon-menu" @click="SelectMenu(scope.row.id)" size="mini">分配菜单
					</el-button>
					<el-button type="success" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">修改
					</el-button>
					<el-popconfirm style="margin-left: 10px;" confirm-button-text='确定' cancel-button-text='再想想'
						icon="el-icon-info" icon-color="red" title="确定删除此角色" @confirm="handleDelete(scope.row.id)">
						<el-button type="danger" icon="el-icon-delete" slot="reference" size="mini">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>


		<!-- 嵌套表单 新增用户信息 -->
		<el-dialog title="添加角色" :visible.sync="dialogFormVisible" width="30%">
			<el-form label-width="80px">
				<el-form-item label="角色名称">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色描述">
					<el-input v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色标识">
					<el-input v-model="form.flag" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 嵌套表单 编辑角色信息 -->
		<el-dialog title="编辑角色" :visible.sync="dialogFormVisible1" width="30%">
			<el-form label-width="100px">
				<el-form-item label="角色名称">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色描述">
					<el-input v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色标识">
					<el-input v-model="form.flag" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="edit">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 嵌套表单  分配菜单-->
		<el-dialog title="分配菜单" :visible.sync="dialogFormVisible2">
			<el-tree :data="menuData" show-checkbox ref="tree" :props="props" node-key="id" :check-strictly="true"
				:default-expanded-keys="expends" :default-checked-keys="checks">
				<span class="custom-tree-node" slot-scope="{node,data}">
					<span><i :class="data.icon"></i>{{ data.name }}</span>
				</span>
			</el-tree>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="saveRoleMenu">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Role",
		data() {
			return {
				multipleSelection: [],
				tableData: [],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				form: {},
				menuData: [],
				props: {
					label: 'name'
				},
				expends: [],
				checks: [],
				roleId: 0
			}
		},
		methods: {
			// 勾选用户
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val);
			},

			//批量删除弹窗 &&  批量删除角色
			delBetch() {
				if (this.multipleSelection != '') {
					this.$confirm('此操作将永久删除这些角色, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true
					}).then(() => {
						this.delChose()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error("未选择需要删除角色!");
				}
			},
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/role/del/batch", ids).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},

			// 打开菜单分配  && 分配角色菜单
			SelectMenu(roleId) {
				this.dialogFormVisible2 = true
				this.roleId = roleId
				this.menuData = {}
				// 请求菜单数据
				this.request.get('/menu').then(res => {
					this.menuData = res.obj

					// 把后台返回的菜单数据处理成 IDS 数组 
					this.expends = this.menuData.map(v => v.id)
				})
				// 请求角色
				this.request.get('/role/roleMenu/' + roleId).then(res => {
					this.checks = res.obj
				})
			},
			saveRoleMenu() {
				this.request.post("/role/roleMenu/" + this.roleId, this.$refs.tree.getCheckedKeys()).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.dialogFormVisible2 = false
					} else {
						this.$message.error(res.message)
					}
				})

			},

			// 新增角色表框 && 新增角色
			handleAdd() {
				this.dialogFormVisible = true
				this.form = {}
			},
			save() {
				this.request.post("/role", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible = false
						this.$message.success(res.message)
						this.load()
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},

			// 编辑角色信息 && 打开角色信息框
			edit() {
				this.request.put("/role", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible1 = false
						this.$message.success(res.message)
						this.load()
					} else {
						this.dialogFormVisible1 = false
						this.$message.error(res.message)
					}
				})
			},
			handleEdit(row) {
				this.form = JSON.parse(JSON.stringify(row))
				this.dialogFormVisible1 = true
				this.load()
			},


			// 删除信息
			handleDelete(id) {
				this.request.delete("/role/" + id).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.error(res.message)
					}
				})
			},

			// 用户数据请求
			load() {
				this.request.get('/role').then(res => {
					this.tableData = res.obj
				})
			},
		},
		created() {
			// 查询所有用户
			this.load();
		}
	}
</script>

<style>
	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}
</style>
